<template>
  <div>
    <div
        v-if="$store.state.activeInbox.sendInfo[0].message_type === '0' || $store.state.activeInbox.sendInfo[0].message_type === '2'"
        class="container">
      <div class="management">
        <div class="head">
          <!--  <a @click="drawer = true" class="router-link-right"><i class="el-icon-message"></i></a>-->
          <router-link to="/inbox"><i class="el-icon-back"></i></router-link>
          <h3>{{ $store.state.activeInbox.sendInfo[0].message_title }}</h3>
          <h5>{{ $store.state.activeInbox.sendInfo[0].message_create_time }}</h5>
        </div>
        <div class="center">
          <div class="centercard">
            <div class="center-card">
              <div class="top-img"><img :src="$store.state.publicStaticPath + $store.state.activeActivity.activity_cover"/></div>
              <div class="other">
                <div class="center-text">
                  <!-- <div class="top-tiao"><el-progress :text-inside="true" :stroke-width="15" :percentage=Math.floor(($store.state.newactivity[index].activity_participator_num/$store.state.newactivity[index].activity_people_max_num)*100) status="warning"></el-progress></div> -->
                  <div class="center-shuzi">
                    <div class="shuzi-left">
                      <span>已报名人数:</span>
                      <p>{{ $store.state.activeActivity.activity_participator_num }}</p>
                    </div>
                    <div class="shuzi-right">
                      <span>需求人数:</span>
                      <p>{{ $store.state.activeActivity.activity_people_max_num }}</p>
                    </div>
                  </div>
                </div>
                <div class="buttom-text">
                  <h3>{{ $store.state.activeActivity.activity_name }}</h3>
                  <div>
                    <div class="input">
                      <i class="el-icon-time"></i>
                      <span>{{ $store.state.activeActivity.activity_begin_time }}</span>
                      <span>-</span>
                      <span>{{ $store.state.activeActivity.activity_end_time }}</span>
                    </div>
                    <div class="input">
                      <i class="el-icon-location-outline"></i>
                      <span>{{ $store.state.activeActivity.activity_province }}</span>
                      <span>{{ $store.state.activeActivity.activity_city }}</span>
                      <span>{{ $store.state.activeActivity.activity_district }}</span>
                      <span>{{ $store.state.activeActivity.activity_address }}</span>
                    </div>
                    <div class="input">
                      <i class="el-icon-search"></i>
                      <span>{{ $store.state.activeActivity.activity_tag }}</span>
                    </div>
                    <!-- 							<div class="input">
                      <i class="el-icon-edit"></i>
                      <span>{{ $store.state.newactivity[index].team }}</span>
                    </div> -->
                    <div class="input">
                      <i class="el-icon-s-custom"></i>
                      <span>{{ $store.state.newactivityjoiner[0].real_name }}</span>
                    </div>
                    <div class="input">
                      <i class="el-icon-mobile-phone"></i>
                      <span>{{ $store.state.activeActivity.activity_initiator_phone }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="news-news">
              <ul class="probootstrap-news">
                <li>
                  <h3>活动详情</h3>
                  <div class="line"></div>
                  <div class="jieshaotext">
                    <!--                    <h2>{{ newactivity.activity_detail }}</h2>-->
                    <p>{{ $store.state.activeActivity.activity_detail }}</p>
                  </div>
                </li>
              </ul>

            </div>
          </div>
        </div>
        <div class="footer">
          <div class="footer-center">
            <el-descriptions title="申请者信息" direction="vertical" :column="4" border style="width: 1000px;">
              <el-descriptions-item label="申请人" style="text-align: center">{{ $store.state.activeInbox.senderInfo[0].user_name }}</el-descriptions-item>
              <el-descriptions-item label="真实姓名" style="text-align: center">{{ $store.state.activeInbox.senderInfo[0].real_name }}</el-descriptions-item>
              <el-descriptions-item label="昵称" style="text-align: center">{{ $store.state.activeInbox.senderInfo[0].nick_name }}</el-descriptions-item>
              <el-descriptions-item label="年龄">{{ $store.state.activeInbox.senderInfo[0].age }}</el-descriptions-item>
              <el-descriptions-item label="性别">{{ $store.state.activeInbox.senderInfo[0].sex }}</el-descriptions-item>
              <el-descriptions-item label="政治地位">{{ $store.state.activeInbox.senderInfo[0].user_status }}</el-descriptions-item>
              <el-descriptions-item label="民族">{{ $store.state.activeInbox.senderInfo[0].user_nation }}</el-descriptions-item>
              <el-descriptions-item label="学校">{{ $store.state.activeInbox.senderInfo[0].user_school }}</el-descriptions-item>
              <el-descriptions-item label="学号">{{ $store.state.activeInbox.senderInfo[0].user_school_id }}</el-descriptions-item>
              <el-descriptions-item label="证件号码">{{ $store.state.activeInbox.senderInfo[0].user_number }}</el-descriptions-item>
              <el-descriptions-item label="联系电话">{{ $store.state.activeInbox.senderInfo[0].phone }}</el-descriptions-item>
              <el-descriptions-item label="联系邮箱">{{ $store.state.activeInbox.senderInfo[0].email }}</el-descriptions-item>
              <el-descriptions-item label="申请理由" :span="4">{{ $store.state.activeInbox.sendInfo[0].message_content }}</el-descriptions-item>
            </el-descriptions>

            <div v-if="$store.state.activeInbox.fileList.length === 0">
              <div v-if="$store.state.activeInbox.sendInfo[0].message_type === '0'">
                <el-empty description="该报名表无附件"></el-empty>
              </div>
              <div v-if="$store.state.activeInbox.sendInfo[0].message_type === '2'">
                <el-empty description="该退出申请表无附件"></el-empty>
              </div>
            </div>
            <div v-else>
              <h4 style="margin-top: 15px">附件信息</h4>
              <el-table
                  :data="$store.state.activeInbox.fileList"
                  stripe
                  border
                  max-height="250"
                  style="margin: 15px 0">
                <el-table-column
                    label="行号"
                    width="350">
                  <template slot-scope="scope">
                    {{scope.$index + 1}}
                  </template>
                </el-table-column>
                <el-table-column
                    label="文件类型"
                    width="450">
                  <template slot-scope="scope">
                    {{fileType(scope.$index)}}
                  </template>
                </el-table-column>
                <el-table-column
                    label="预览"
                    width="100">
                  <template slot-scope="scope">
                    <el-button type="text" @click="showFile(scope.row.file_accessory)">预览</el-button>
                  </template>
                </el-table-column>
                <el-table-column
                    label="下载"
                    width="100">
                  <template slot-scope="scope">
                    <el-link type="primary" :href="$store.state.publicStaticPath + scope.row.file_accessory">下载</el-link>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div v-if="$store.state.activeInbox.sendInfo[0].message_type === '0'" class="footer-footer">
              <el-button type="success" icon="el-icon-check" @click="pass()">同意</el-button>
              <el-button type="danger" icon="el-icon-close" @click="close()">拒绝</el-button>
            </div>
            <div v-if="$store.state.activeInbox.sendInfo[0].message_type === '2'" class="footer-footer">
              <el-button type="success" icon="el-icon-check" @click="exitPass()">同意</el-button>
              <el-button type="danger" icon="el-icon-close" @click="exitClose()">拒绝</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-else class="simpleuser">
      <div class="head">
        <!--  <a @click="drawer = true" class="router-link-right"><i class="el-icon-message"></i></a>-->
        <router-link to="/inbox"><i class="el-icon-back"></i></router-link>
        <h3>{{ $store.state.activeInbox.sendInfo[0].message_title }}</h3>
        <h5>{{ $store.state.activeInbox.sendInfo[0].message_create_time }}</h5>
      </div>
      <div class="center">
      </div>
      <div class="head2">
        <h2>致{{ $store.state.userInfo.nickName }}同学</h2>
      </div>
      <div class="center2">
        <div class="center2-true">
          {{ $store.state.activeInbox.sendInfo[0].message_content }}
        </div>
      </div>
      <div class="footer2">
        管理员：{{ $store.state.activeInbox.senderInfo[0].user_name }}
      </div>

    </div>
  </div>
</template>

<script>

import {request} from "../../api/axios";
import axios from "axios";

export default {
  name: 'inboxdetail',
  data() {
    return {
      index: 0,
      returnid: '',
      uploadData: {
        sender: '',
        receiver: 0,
        message_type: '0',
        message_content: '',
        message_title: '',
        is_null: true,
        join_activity_id: '',
      }
    };
  },
  computed: {
    // 文件类型计算属性
    fileType() {
      return function (index) {
        let i = this.$store.state.activeInbox.fileList[index].file_accessory.lastIndexOf(".") + 1;
        let ext = this.$store.state.activeInbox.fileList[index].file_accessory.substr(i);
        return ext
      }
    },
  },
  methods: {
    // 预览文件
    showFile(row) {
      window.open('https://view.officeapps.live.com/op/view.aspx?src=' + this.$store.state.publicStaticPath + row)
      // window.open('https://view.officeapps.live.com/op/view.aspx?src=' + 'https://www.hmbzx1314.fun/test.docx')
    },
    // 通过活动申请
    pass() {
      request({
        url: '/v1/activities/joinactivity',
        method: 'post',
        data: {
          userName: this.$store.state.activeInbox.senderInfo[0].user_name,
          id: this.$store.state.activeInbox.sendInfo[0].join_activity_id
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.uploadData.message_title = '审核结果通知'
          this.uploadData.message_content = '恭喜你参与' + this.$store.state.activeActivity.activity_name + '志愿活动的申请已经通过审核，请前往个人活动界面查看！'
          this.uploadData.sender = this.$store.state.userInfo.userName
          this.uploadData.receiver = this.$store.state.activeInbox.senderInfo[0].id
          this.uploadData.message_type = '1'
          const formData = new FormData(); //FormData对象，添加参数只能通过append('key', value)的形式添加
          formData.append('data', JSON.stringify(this.uploadData)); //将data转换为json格式
          // let uploadUrl = 'https://paas-edu.bktencent.com/o/bai-volunteer/v1/messages/sendactivitymessage'; //上传地址
          let uploadUrl = 'http://localhost:8000/v1/messages/sendactivitymessage';
          axios.post(uploadUrl, formData).then(res => {
            if (res.data.code === 200) {
              // this.$store.state.userInfo.avatar = res.data.avatar
              alert('发送成功！')
            }
          });
        } else {
          alert('该成员已参加过该活动！');
          return;
        }
      });
    },
    // 拒绝退出活动申请
    close() {
      this.uploadData.message_title = '审核结果通知'
      this.uploadData.message_content = '很遗憾您参加的' + this.$store.state.activeActivity.activity_name + '志愿活动申请没有通过审核！原因是：'
      this.uploadData.sender = this.$store.state.userInfo.userName
      this.uploadData.receiver = this.$store.state.activeInbox.senderInfo[0].id
      this.uploadData.message_type = '1'

      this.$prompt('请输入原因！', '回执', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(({value}) => {
        this.uploadData.message_content += value
        const formData = new FormData(); //FormData对象，添加参数只能通过append('key', value)的形式添加
        formData.append('data', JSON.stringify(this.uploadData)); //将data转换为json格式
        // let uploadUrl = 'https://paas-edu.bktencent.com/o/bai-volunteer/v1/messages/sendactivitymessage'; //上传地址
        let uploadUrl = 'http://localhost:8000/v1/messages/sendactivitymessage';
        axios.post(uploadUrl, formData).then(res =>{
          if (res.data.code === 200) {
            alert('发送成功！')
          }
        });
      })
    },

    // 同意退出活动的申请
    exitPass(){
      request({
        url: '/v1/activities/exitactivity',
        method: 'post',
        data: {
          userName: this.$store.state.activeInbox.senderInfo[0].user_name,
          id: this.$store.state.activeInbox.sendInfo[0].join_activity_id
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.uploadData.message_title = '审核结果通知'
          this.uploadData.message_content = '您已成功退出' + this.$store.state.activeActivity.activity_name + '活动，期待与您的下次相遇！'
          this.uploadData.sender = this.$store.state.userInfo.userName
          this.uploadData.receiver = this.$store.state.activeInbox.senderInfo[0].id
          this.uploadData.message_type = '1'
          const formData = new FormData(); //FormData对象，添加参数只能通过append('key', value)的形式添加
          formData.append('data', JSON.stringify(this.uploadData)); //将data转换为json格式
          // let uploadUrl = 'https://paas-edu.bktencent.com/o/bai-volunteer/v1/messages/sendactivitymessage'; //上传地址
          let uploadUrl = 'http://localhost:8000/v1/messages/sendactivitymessage';
          axios.post(uploadUrl, formData).then(res => {
            if (res.data.code === 200) {
              // this.$store.state.userInfo.avatar = res.data.avatar
              alert('发送成功！')
            }
          });
        } else {
          alert('该成员暂未参加该活动！');
          return;
        }
      });
    },
    // 拒绝退出活动的申请
    exitClose() {
      this.uploadData.message_title = '审核结果通知'
      this.uploadData.message_content = '很遗您暂时无法退出' + this.$store.state.activeActivity.activity_name + '活动！原因是：'
      this.uploadData.sender = this.$store.state.userInfo.userName
      this.uploadData.receiver = this.$store.state.activeInbox.senderInfo[0].id
      this.uploadData.message_type = '1'

      this.$prompt('请输入原因！', '回执', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(({value}) => {
        this.uploadData.message_content += value
        const formData = new FormData(); //FormData对象，添加参数只能通过append('key', value)的形式添加
        formData.append('data', JSON.stringify(this.uploadData)); //将data转换为json格式
        // let uploadUrl = 'https://paas-edu.bktencent.com/o/bai-volunteer/v1/messages/sendactivitymessage'; //上传地址
        let uploadUrl = 'http://localhost:8000/v1/messages/sendactivitymessage';
        axios.post(uploadUrl, formData).then(res =>{
          if (res.data.code === 200) {
            alert('发送成功！')
          }
        });
      })
    }
  },
  created() {
    if (this.$store.state.activeInbox.sendInfo[0].message_type === '0' || this.$store.state.activeInbox.sendInfo[0].message_type === '2') {
      this.uploadData.join_activity_id = this.$store.state.activeInbox.sendInfo[0].join_activity_id;
    }
  },
  destroyed() {
    this.$store.state.activeInbox = {}
    this.$store.state.activeActivity = {}
  }
};
</script>


<style scoped>
.container {
  width: 100%;

}

.management {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.head {
  width: 75rem;
  display: flex;
  margin: auto;
  justify-content: flex-start;
  line-height: 1rem;
}
.head h5 {
  margin: 0 0rem 0 0rem;
  color: #888888;
}
.head h3 {
  margin: 0 2rem 0 2rem;
}
.el-icon-back {
  font-size: 25px;
}

.center{
  width: 75rem;
  margin: auto;
  border-top: 3px rgb(0, 165, 255) solid;
  display: flex;
  justify-content: flex-start;
}

.footer {
  width: 70rem;
  margin: auto;
  display: flex;
  justify-content: flex-start;
}
.footer-footer{
  float: right;
  margin-bottom: 15px;
}


.simpleuser{
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.head2,.center2,.footer2 {
  width: 70rem;
  margin: auto;
  display: flex;
  justify-content: flex-start;
}

</style>
